<!DOCTYPE html>

<html>
	<head>
		
		<!-- Theme -->
		<link rel="stylesheet" href="../themes/themeroller/default-theme/ui.all.css" type="text/css" media="screen" />
		
		<!-- jQuery Library -->
		<script src="../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>

		<!-- These are the only needed files to include -->
		<script src="../src/defaults.js" type="text/javascript" charset="utf-8"></script>
		<script src="../src/core.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>
		
		<style type="text/css" media="screen">

			body {
				padding: 10px;
				font-size: 14px;
				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			}
			
		</style>
		
		<div id="optiongroup">
			<input type="checkbox" name="check" value="" id="check" />
		</div>
		
		<br />

		<div id="datepicker"></div>

		<script type="text/javascript" charset="utf-8">

			window.onload = function() {

				if (window.widget) {
					widget.setNavigationEnabled(false);
				}
				
				Nokia.showSplash('<span>Loading</span>');
				
				Nokia.use('*', function() {
					
					var check = new Nokia.CheckBox({
						element: '#check',
						label: 'Testing checkbox'
					});
						
					var optionGroup = new Nokia.OptionGroup({
						element: '#optiongroup',
						title: 'Option Group'
					});
					
					optionGroup.addItem(check);
					
					var datepicker = new Nokia.DatePicker({
						element: '#datepicker'
					});
					
					Nokia.hideSplash();
					
				});

			};

		</script>

	</body>
</html>